<!DOCTYPE html>
<html lang="en">
<head>
<title>huangliusong</title>
<script src="./vue.js"></script>
<style type="text/css">
	@keyframes bounce-in{
		0%{
			transform: scale(0);
		}
		50%{
			transform: scale(1.5);
		}
		100%{
			transform: scale(1);
		}
	}
	.leave
	{
		transform-origin: left center;
		animation: bounce-in 1s;
	}
	.enter{
		transform-origin: left center;
		animation: bounce-in 1s reverse;
	}
</style>
</head>
 
<body>
	<div id="root">
		<transition name="fade" enter-active-class="active"
		leave-active-class="leave"
		>
		<div v-if="show">黄柳淞</div>
		</transition>
		<button @click="handeClick">切换</button>
	</div>

	<script type="text/javascript">
	var vm=new Vue({
		el:"#root",
		data:{
			show:true
		},
		methods:{
			handeClick:function(){
				this.show=!this.show
			}
		}
	})
	</script>
</body>

</html>